<template>
    <div class="article-page">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>面经后台</el-breadcrumb-item>
            <el-breadcrumb-item>面经管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card shadow="never" border="false">
            <template #header>
                <div class="header">
                    <span>共 {{ total }} 条记录</span>
                    <el-button
                        icon="el-icon-plus"
                        size="small"
                        type="primary"
                        @click="open('', 'add')"
                        round>
                        添加面经
                    </el-button>
                </div>
            </template>

            <el-drawer
                :title="detailTitle"
                size="100%"
                :visible.sync="drawer">
                <detail :operation="operation" @closeDrawer="closeDrawer"></detail>
            </el-drawer>

            <el-table
                :data="tableData"
                style="width: 100%"
            >
                <el-table-column
                    type="index"
                    width="60">
                </el-table-column>
                <el-table-column
                    prop="stem"
                    label="标题">
                </el-table-column>
                <el-table-column
                    prop="creator"
                    label="作者"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="likeCount"
                    label="点赞数"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="views"
                    label="浏览数"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="createdAt"
                    label="创建时间"
                    width="180">
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-view" @click="open(scope, 'look')"></el-button>
                        <el-button type="text" icon="el-icon-edit-outline" @click="open(scope, 'edit')"></el-button>
                        <el-button type="text" icon="el-icon-delete" @click="open(scope, 'del')"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    background
                    @size-change="pageSizeChange"
                    @current-change="currentChange"
                    :current-page="current"
                    :page-sizes="[3, 10, 20, 30, 50]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import { delArticle, getArticle, getData } from '@/api/article'

export default {
    name: 'article-page',
    data () {
        return {
            tableData: [],
            detailTitle: '',
            total: 0,
            pageTotal: 0,
            current: 1,
            pageSize: 10,
            drawer: false,
            operation: {
                type: '',
                id: '',
                data: {}
            }
        }
    },
    created () {
        this.initData()
    },
    methods: {
        async initData () {
            const res = await getData({
                current: this.current,
                pageSize: this.pageSize
            })
            this.tableData = res.data.data.rows
            this.total = res.data.data.total
            this.pageTotal = res.data.data.pageTotal
        },
        async open (scope, type) {
            if (type === 'add') {
                this.detailTitle = '添加面经'
                this.operation.type = type
                this.operation.data = {}
                this.drawer = true
            } else if (type === 'look') {
                this.detailTitle = '面经详情'
                const res = await getArticle(scope.row.id)
                this.operation.type = type
                this.operation.data = res.data.data
                this.drawer = true
            } else if (type === 'edit') {
                this.detailTitle = '编辑面经'
                const res = await getArticle(scope.row.id)
                this.operation.type = type
                this.operation.id = res.data.data.id
                this.operation.data = res.data.data
                this.drawer = true
            } else if (type === 'del') {
                const res = await delArticle({ id: scope.row.id })
                if (res.status === 200) {
                    this.$message.success('删除成功')
                    if (this.tableData.length === 1 && this.current > 1) this.current--
                    this.initData()
                }
                console.log(res)
            }
        },
        pageSizeChange (n) {
            this.pageSize = n
            this.initData()
        },
        currentChange (n) {
            this.current = n
            this.initData()
        },
        closeDrawer (type) {
            this.drawer = false
            if (type === 'add') this.current = 1
            this.initData()
        }
    }
}
</script>

<style lang="scss" scoped>
.el-card {
    margin-top: 25px;

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 16px;
    }

    .actions {
        font-size: 18px;
        display: flex;
        justify-content: space-around;
        color: #666666;

        > i:hover {
            color: rgba(114, 124, 245, 1);
            cursor: pointer;
        }
    }
}

.el-pagination {
    margin-top: 20px;
    text-align: center;
}

.el-breadcrumb {
    margin-top: 10px;
}

.el-form {
    padding-right: 40px;
}

.quill-editor {
    ::v-deep .ql-editor {
        height: 300px;
    }
}

.el-rate {
    padding: 10px 0;
}

.article-preview {
    padding: 0 40px 40px 40px;

    > h5 {
        font-size: 20px;
        color: #666666;
        border-bottom: 1px dashed #CCCCCC;
        padding-bottom: 30px;
        margin: 0 0 20px 0;
    }
}
</style>
